<template>
	<view class="page">
		<image src="../../static/scanimg/indexBg.png" style="width: 100%;height: 100%;z-index: -1;position: absolute;">
		</image>
		<view class="btns">
			<view class="row">
				<view>
					<image src="../../static/scanimg/rule.png" style="width: 137rpx;height: 137rpx;" @tap="openRule()">
					</image>
				</view>
				<view>
					<!-- openRule 规则 -->
					<!-- openInfo 实名信息 -->
					<!-- openClockSuccess 打开成功 -->
					<!-- openClockCancel 打卡失败 -->
					<!-- openReceivePrize 领取奖品 -->
					<!-- openGetPrize  获取奖品 -->
					<!-- openErrorPrize 无奖品 -->
					<!-- <image src="../../static/scanimg/scanBtn.png" style="width: 416rpx;height: 130rpx;"
						@tap="createClock()">
					</image> -->
					<image src="../../static/scanimg/lookResultBtn.png" v-if="lookResultShow && active_state!=0" style="width: 416rpx;height: 130rpx;"
						@tap="lookResult()">
					</image>
					<image src="../../static/scanimg/btn.png" v-else-if="!lookResultShow && active_state!=0" style="width: 416rpx;height: 130rpx;"
						@tap="createClock()">
					</image>


				</view>
				<view>
					<button open-type="share" class="image-button">
						<image src="../../static/scanimg/share.png" style="width: 137rpx;height: 137rpx;"></image>
					</button>
				</view>
			</view>

		</view>

		<!-- 规则弹窗 -->
		<uni-popup ref="popupRule" type="center" :animation="false">
			<view class="popup" style="width: 640rpx;height: 857rpx;">
				<image src="../../static/scanimg/rulebg.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<view>
					<view class="title">
						活动规则说明
					</view>
					<view class="contentRule">
						<rich-text :nodes="settingInfo.rule"></rich-text>
					</view>
					<view style="position: absolute;bottom: 60rpx;width: 100%;">
						<button class="popupBtns" @click="closeRule()">
							同意上述活动要求
						</button>
					</view>

				</view>
			</view>
			<view class="popupGuanbi" @click="closeRule()">
				<image src="../../static/scanimg/guanbi.png"></image>
			</view>
		</uni-popup>

		<!-- 实名信息弹窗 -->
		<uni-popup ref="popupInfo" type="center" :animation="false">
			<view class="popup" style="width: 640rpx;height: 857rpx;">
				<image src="../../static/scanimg/infoBg.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<view style="height: 100%;">
					<view class="title">
						请完善实名信息
					</view>
					<view class="contentUserInfo">
						<view class="inputBg">
							<image src="../../static/scanimg/nickname.png"></image>
							<input type="text" placeholder="请输入您的真实姓名" v-model="surname" />
						</view>
						<view class="inputBg">
							<image src="../../static/scanimg/phone.png"></image>
							<input type="text" placeholder="请输入手机号码" v-model="mobile" style="flex: 1;" />
							<button style="background-color: #0164a7;color: #fff;font-size: 26rpx;" type="default"
								open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键获取</button>
						</view>
						<view class="inputBg">
							<image src="../../static/scanimg/email.png"></image>
							<input type="text" placeholder="请输入常用邮箱" v-model="mail" />
						</view>
					</view>
					<view style="font-size: 30rpx;font-weight: bold;text-align: center;margin-top: 70rpx;">
						*注意填写准确信息，否则无法兑换机票
					</view>
					<view style="position: absolute;bottom: 80rpx;width: 100%;">
						<button class="popupBtns" @tap="registration()">
							提交
						</button>
					</view>

				</view>
			</view>
			<view class="popupGuanbi" @click="closeInfo()">
				<image src="../../static/scanimg/guanbi.png"></image>
			</view>
		</uni-popup>


		<!-- 打卡成功 -->
		<uni-popup ref="popupClockSuccess" type="center" :animation="false">
			<view class="popup" :style="getPrize?'width: 640rpx;height: 1246rpx;':'width: 640rpx;height: 857rpx;'">
				<image v-if="clockSuccess" src="../../static/scanimg/clockSuccessBg.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<image v-if="clockCancel" src="../../static/scanimg/clockCancelBg.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<image v-if="getPrize" src="../../static/scanimg/getPrize.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<image v-if="errorPrize" src="../../static/scanimg/errorPrize.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<image v-if="chongfuclock" src="../../static/scanimg/clockCancelBg.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
				<image v-if="getPrizeChongfu" src="../../static/scanimg/getPrize.png"
					style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>

				<view>
					<view class="contentInfo" v-if="clockSuccess">
						<view class="name">
							{{address}}
						</view>
						<view class="successText">
							打卡成功
						</view>
						<view class="text">
							活动进展：已完成{{completenum}}个 待打卡{{settingInfo.tasksnum - completenum}}个
						</view>
					</view>

					<view class="contentInfo" v-if="clockCancel">
						<view class="name">
							无法打卡
						</view>
						<view class="cancelText">
							未检测到在打卡范围内
						</view>
					</view>

					<view class="contentInfo" v-if="chongfuclock">
						<view class="name">
							无需重复打卡
						</view>
						<view class="cancelText">
							该场所您已完成打卡任务
						</view>
					</view>

					<view class="getInfo" v-if="getPrize">
						<view class="name">
							恭喜您
						</view>
						<view class="title" style="padding-top: 50rpx;">
							获得国际往返香港机票一张
						</view>
						
						
						<view style="margin-top: 180rpx;text-align: left;"  v-if="imageClockPath || image_arrPath.length > 0">
							<view style="text-align: center;font-size: 30rpx;font-weight: bold;">请补充打卡凭证</view>
							<view>
								<view style="padding: 10rpx 0rpx;">
									<text style="color: #f00;">*</text>需上传1张打卡地图照片
								</view>
								<view style="display: flex;">
									<view style="position: relative;padding: 0rpx 15rpx;">
										<image :src="imageClockPath"
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;"></image>
									</view>
						
								</view>
							</view>
							<view>
								<view style="padding: 10rpx 0rpx;">
									<text style="color: #f00;">*</text>需上传3张社交媒体分享截图
								</view>
								<view style="display: flex;">
									<view style="padding: 0rpx 15rpx;position: relative;"
										v-for="(item,index) in image_arrPath" :key="index">
										<image :src='item'
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;"></image>
									</view>
								</view>
							</view>
						</view>
						
						
						<view style="margin-top: 180rpx;text-align: left;" v-else>
							<view style="text-align: center;font-size: 30rpx;font-weight: bold;">请补充打卡凭证</view>
							<view>
								<view style="padding: 10rpx 0rpx;">
									<text style="color: #f00;">*</text>需上传1张打卡地图照片
								</view>
								<view style="display: flex;">
									<view style="position: relative;padding: 0rpx 15rpx;">
										<image v-if="imageClock" :src="imageClock"
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;"></image>
										<image @tap="imageClockUpload()" v-else src="../../static/scanimg/unpload.png"
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;">
										</image>
										<image v-if="imageClock" src="../../static/scanimg/del.png"
											style="width: 45rpx;height: 45rpx;position: absolute;right: 0rpx;top: -10rpx;"
											@tap='DelImageClock()'></image>
									</view>

								</view>
							</view>
							<view>
								<view style="padding: 10rpx 0rpx;">
									<text style="color: #f00;">*</text>需上传3张社交媒体分享截图
								</view>
								<view style="display: flex;">
									<view style="padding: 0rpx 15rpx;position: relative;"
										v-for="(item,index) in image_arr" :key="index">
										<image :src='item.file_path'
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;"></image>
										<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
										<image src="../../static/scanimg/del.png"
											style="width: 45rpx;height: 45rpx;position: absolute;right: 0rpx;top: -10rpx;"
											@tap='DelPic(index)'></image>
									</view>
									<view style="padding: 0rpx 15rpx;" @tap='uploadpic' v-if="image_arr.length < 3">
										<image src="../../static/scanimg/unpload.png"
											style="width: 130rpx;height: 130rpx;border-radius: 15rpx;">
										</image>
									</view>
								</view>
							</view>
						</view>
						
						
					</view>


					<view class="getInfo" v-if="getPrizeChongfu">
						<view class="name">
							已经领取
						</view>
						<view class="title" style="padding-top: 50rpx;">
							您已取领过奖励，不需重复操作
						</view>
					</view>



					<view style="position: absolute;bottom:90rpx;width: 100%;">
						<button v-if="getPrize && !receiveShow" class="popupBtns" @tap="uploadEdit()">提交</button>
						<view class="getInfoText" v-if="getPrize">
							审核通过后，机票将以邮件形式发放敬请留意
						</view>
						<view class="errorInfoText" v-if="errorPrize">
							关注【香港国际机场】官方账号
						</view>
						<view class="errorInfoText" v-if="errorPrize">
							第一时间了解后续活动信息噢！
						</view>
						<!-- <guanzhu :show="true"></guanzhu> -->
						<!-- <button class="popupBtns">前往关注公众号
								<official-account class="official-account" @load="bindload" @error="binderror"></official-account>
							</button> -->
						
						<button v-if="getPrize && receiveShow" class="popupBtns" @tap="canclePopup()">好的</button>
						<button v-if="!getPrize" class="popupBtns" @tap="canclePopup()">好的</button>
					</view>
				</view>
			</view>
			<view class="popupGuanbi" @click="closeClockSuccess()">
				<image src="../../static/scanimg/guanbi.png"></image>
			</view>
		</uni-popup>


		<!-- 领取奖品 -->
		<uni-popup ref="popupReceivePrize" type="center" :animation="false">
			<view class="popup" style="width: 640rpx;height: 857rpx;">
				<view style="height: 100%;">
					<image src="../../static/scanimg/receivePrize.png"
						style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
					<view class="receiveInfo">
						<view class="name">
							恭喜您
						</view>
						<view class="title" style="padding-top: 50rpx;">
							已打卡集满{{settingInfo.tasksnum}}个
						</view>
						<view class="title">
							城市的候机楼
						</view>
					</view>

					<view style="position: absolute;bottom: 60rpx;width: 100%;text-align: center;">
						<botton class="popupBtns" style="padding: 20rpx 60rpx;" @tap="lingqu()">
							领取奖品
						</botton>
					</view>
				</view>
			</view>
			<view class="popupGuanbi" @click="closeReceivePrize()">
				<image src="../../static/scanimg/guanbi.png"></image>
			</view>
		</uni-popup>
		
		<!-- 活动结束 -->
		<uni-popup ref="popupactivityEnding" type="center" :is-mask-click="false" :animation="false">
			<view class="popup" style="width: 640rpx;height: 857rpx;">
				<view style="height: 100%;">
					<image src="../../static/scanimg/activityEnding.png" style="height: 100%;width: 100%;position: absolute;z-index: -1;"></image>
					<view style="font-size: 30rpx;text-align: center;position: relative;top: 78%;letter-spacing: 3rpx;">
						<view style="font-size: 40rpx;font-weight: bold;">本次活动已结束</view>
						<view style="font-size: 32rpx;color: #0171bc;padding-top: 20rpx;">感谢关注</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const app = getApp();
	var graceJS = require('../../Grace.JS/grace.js');
	import guanzhu from '../../graceUI/components/guanzhu'
	export default {
		components: {
			guanzhu
		},
		data() {
			return {
				userInfo: {},
				active_state:0,
				surname: "",
				mobile: "",
				mail: "",
				latitude: "",
				longitude: "",
				settingInfo: {},
				clockSuccess: false,
				clockCancel: false,
				getPrize: false,
				errorPrize: false,
				chongfuclock: false,
				getPrizeChongfu: false,
				lingquInfo: {},
				address: '',
				tasksnum: 0,
				scanShow: false,
				vid: '',
				completenum: 0,
				reward_id: 0,
				lookResultShow: false,
				imageClock: '',
				imageClockId: '',
				image_arr: [],
				imageClockPath: '',
				image_arrPath: [],
				imageClockId:'',
				receiveShow:false,
				lottery:0
			}
		},
		onLoad(options) {
			let that = this;
			// if(options.scene){
			// 	that.scanShow = true;
			// }
		},
		onShow() {
			let that = this;
			that.getSetting();
			app.globalData.userlogin().then(function(res){
			    that.getUserInfo();
			    that.showRewardDetail();
			});

			
		},
		mounted() {
			let that = this;
			that.selfLocation();
		},
		methods: {
			// bindload(e) {
			// 	console.log('bindload:', e)
			// },
			// binderror(e) {
			// 	console.log('binderror:', e)
			// },
			//规则弹窗
			openRule: function() {
				this.$refs.popupRule.open();
			},
			closeRule: function() {
				this.$refs.popupRule.close();
			},
			//实名信息弹窗
			openInfo: function() {
				this.$refs.popupInfo.open();
			},
			closeInfo: function() {
				this.$refs.popupInfo.close();
			},
			//获取用户信息
			getUserInfo() {
				let that = this;
				app.globalData._get('user/detail', {}, function(result) {
					that.userInfo = result.data.userInfo;
				});
			},

			//提交打卡
			createClock() {
				let that = this;
				app.globalData._get('user/detail', {}, function(result) {
					that.userInfo = result.data.userInfo;
					//判断用户信息是否存在  不存在就填写用户信息
					if (!that.userInfo.surname || !that.userInfo.mobile || !that.userInfo.mail) {
						that.openInfo();
					} else {
						that.scanCode();
					}
				});

			},
			selfLocation() {
				let self = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						try {
							self.latitude = res.latitude;
							self.longitude = res.longitude;
							uni.setStorageSync('user_latitude', res.latitude);
							uni.setStorageSync('user_longitude', res.longitude);
						} catch {}
					},
					fail: function(err) {
						console.log(err)
					},
				});
			},

			//扫一扫
			scanCode() {
				// 允许从相机和相册扫码
				let that = this;
				uni.scanCode({
					success: function(res) {
						// 微信小程序
						if (res.errMsg == "scanCode:ok") {
							// 扫描到的信息
							console.log(res);
							let info = res.path.split("?");
							let data = info[1].split("=");
							let scene = app.globalData.getSceneDataIndex(data[1]);
							app.globalData._post_form('Clock/createClock', {

								"venue_id": scene.vid,
								"lng": that.longitude,
								"lat": that.latitude
							}, function(result) {
								console.log(result)
								if (result.msg == "打卡成功") {
									that.address = result.data.title;
									that.receivePrize()

								} else if (result.msg == "打卡失败，已超出100米打卡范围" || result.msg ==
									"打卡失败，已超出打卡范围" || result.msg.includes('打卡范围')) {
									that.openClockSuccess();
									that.clockSuccess = false;
									that.clockCancel = true;
									that.chongfuclock = false;
									that.getPrize = false;
									that.errorPrize = false;
									that.getPrizeChongfu = false;
								} else if (result.msg == "该场所您已完成打卡任务，无需重复打卡" || result.msg.includes(
										'重复打卡')) {
									that.openClockSuccess();
									that.clockSuccess = false;
									that.clockCancel = false;
									that.chongfuclock = true;
									that.getPrize = false;
									that.errorPrize = false;
									that.getPrizeChongfu = false;
								} else {
									uni.showModal({
										title: '友情提示',
										content: result.msg,
										showCancel: false,
										success(res) {}
									});
								}



							});
						} else {
							console.log("未识别到二维码，请重新尝试！")
						}
					}
				});
			},

			//获取配置信息
			getSetting() {
				let that = this;
				app.globalData._post_form('Setting/index', {}, function(result) {
					that.settingInfo = result.data.setting;
					that.active_state = result.data.setting.active_state;
					if(that.active_state == 0){
						that.openPopupactivityEnding();
					}
				});
			},


			//提交实名信息
			registration() {
				let that = this;
				if (!that.surname) {
					return uni.showToast({
						title: '请输入您的真实姓名',
						icon: 'none'
					});
				}
				if (!that.mobile) {
					return uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					});
				}
				// if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.mobile)) {
				// 	return uni.showToast({
				// 		title: '请正确输入您的手机号',
				// 		icon: 'none'
				// 	});
				// }
				if (!that.mail) {
					return uni.showToast({
						title: '请输入您的常用邮箱',
						icon: 'none'
					});
				}
				if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(that.mail)) {
					return uni.showToast({
						title: '请正确输入您的常用邮箱',
						icon: 'none'
					});
				}
				app.globalData._post_form('user/registration', {
					"surname": that.surname,
					"mobile": that.mobile,
					"mail": that.mail
				}, function(result) {
					uni.showToast({
						title: result.data.msg,
						icon: 'none',
						duration: 2000
					});
					that.getUserInfo();
					setTimeout(() => {
						that.closeInfo();
						that.openRule();
						// that.scanCode();
					}, 2000)

				});
			},

			//领取奖品
			receivePrize() {
				let that = this;
				app.globalData._post_form('user.reward/receive', {}, function(result) {
					that.completenum = result.data.completenum;
					if (result.data.length != 0) {
						if (result.data.completenum == result.data.tasksnum) {
							that.closeClockSuccess();
							that.openReceivePrize()
							that.clockSuccess = false;
							that.clockCancel = false;
							that.chongfuclock = false;
							that.getPrize = false;
							that.chongfuclock = false;
							that.getPrizeChongfu = false;
							that.rewardDetail();
						} else if (result.data.completenum < result.data.tasksnum) {
							that.openClockSuccess();
							that.clockSuccess = true;
							that.clockCancel = false;
							that.chongfuclock = false;
							that.getPrize = false;
							that.errorPrize = false;
							that.getPrizeChongfu = false;
						}
					} else {
						if (result.msg.includes('重复操作')) {
							that.openClockSuccess();
							that.clockSuccess = false;
							that.clockCancel = false;
							that.chongfuclock = false;
							that.getPrize = false;
							that.chongfuclock = false;
							that.getPrizeChongfu = true;
						}
					}



				});
			},
			//获取领取奖励详情
			rewardDetail() {
				let that = this;
				app.globalData._post_form('user.reward/detail', {}, function(result) {
					that.reward_id = result.data.reward_id;
					that.lottery = result.data.lottery;
					if(result.data.image_clock_file_path && result.data.image_arr_file_path){
						if(result.data.image_clock_file_path || result.data.image_arr_file_path.length > 0){
							that.imageClockPath = result.data.image_clock_file_path;
							that.image_arrPath = result.data.image_arr_file_path;
							that.receiveShow = true;
						}
					}
				});
			},

			//获取用户打卡详情
			showRewardDetail() {
				let that = this;
				app.globalData._post_form('user.reward/detail', {}, function(result) {
					that.reward_id = result.data.reward_id;
					that.lottery = result.data.lottery;
					if(result.data.image_clock_file_path && result.data.image_arr_file_path){
						if(result.data.image_clock_file_path || result.data.image_arr_file_path.length > 0){
							that.imageClockPath = result.data.image_clock_file_path;
							that.image_arrPath = result.data.image_arr_file_path;
							that.receiveShow = true;
						}
					}
					if (result.data.completenum >= result.data.tasksnum) {
						that.lookResultShow = true;
					}
				});
			},
			//查看结果
			lookResult() {
				let that = this;
				app.globalData._get('user.Reward/clickresult', {}, function(result) {
				});
				app.globalData._post_form('user.reward/detail', {}, function(result) {
					if(result.code == 0){
						uni.showModal({
							title: '友情提示',
							content: result.msg,
							showCancel: false,
							success(res) {
							}
						});
					}else{
						that.reward_id = result.data.reward_id;
						that.lottery = result.data.lottery;
						if (that.reward_id) {
							if (that.lottery  == 1) { //that.reward_id <= that.settingInfo.rewardnum
								that.closeReceivePrize();
								that.openClockSuccess();
								that.clockSuccess = false;
								that.clockCancel = false;
								that.chongfuclock = false;
								that.getPrize = true;
								that.errorPrize = false;
								that.getPrizeChongfu = false;
							} else if (that.lottery  == 0){
								that.closeReceivePrize();
								that.openClockSuccess();
								that.clockSuccess = false;
								that.clockCancel = false;
								that.chongfuclock = false;
								that.getPrize = false;
								that.errorPrize = true;
								that.getPrizeChongfu = false;
							}
						}
					}
				});
				// if (that.reward_id) {
				// 	if(that.userInfo.user_id == '3133' || that.userInfo.user_id == '6'){
				// 		that.closeReceivePrize();
				// 		that.openClockSuccess();
				// 		that.clockSuccess = false;
				// 		that.clockCancel = false;
				// 		that.chongfuclock = false;
				// 		that.getPrize = true;
				// 		that.errorPrize = false;
				// 		that.getPrizeChongfu = false;
				// 	}else if (that.reward_id <= that.settingInfo.rewardnum) {
				// 		that.closeReceivePrize();
				// 		that.openClockSuccess();
				// 		that.clockSuccess = false;
				// 		that.clockCancel = false;
				// 		that.chongfuclock = false;
				// 		that.getPrize = true;
				// 		that.errorPrize = false;
				// 		that.getPrizeChongfu = false;
				// 	} else {
				// 		that.closeReceivePrize();
				// 		that.openClockSuccess();
				// 		that.clockSuccess = false;
				// 		that.clockCancel = false;
				// 		that.chongfuclock = false;
				// 		that.getPrize = false;
				// 		that.errorPrize = true;
				// 		that.getPrizeChongfu = false;
				// 	}
				// }
			},

			//领取奖品
			lingqu() {
				let that = this;
				if (that.reward_id) {
					if (that.lottery == 1) { //that.reward_id <= that.settingInfo.rewardnum
						that.closeReceivePrize();
						that.openClockSuccess();
						that.clockSuccess = false;
						that.clockCancel = false;
						that.chongfuclock = false;
						that.getPrize = true;
						that.errorPrize = false;
						that.getPrizeChongfu = false;
					} else if (that.lottery == 0){  
						that.closeReceivePrize();
						that.openClockSuccess();
						that.clockSuccess = false;
						that.clockCancel = false;
						that.chongfuclock = false;
						that.getPrize = false;
						that.errorPrize = true;
						that.getPrizeChongfu = false;
					}
					
				}
				that.lookResultShow = true;
			},
			getPhoneNumber(e) {
				let that = this;
				app.globalData._post_form('user/phoneNumber', e.detail, function(result) {
					that.mobile = result.data.mobile;
				});
			},

			//打卡成功
			openClockSuccess: function() {
				this.$refs.popupClockSuccess.open();
			},
			closeClockSuccess: function() {
				let that = this;
				that.$refs.popupClockSuccess.close();
				that.clockSuccess = false;
				that.clockCancel = false;
				that.chongfuclock = false;
				that.getPrize = false;
				that.errorPrize = false;
				that.getPrizeChongfu = false;
			},

			//领取奖品
			openReceivePrize: function() {
				this.$refs.popupReceivePrize.open();
			},
			closeReceivePrize: function() {
				this.$refs.popupReceivePrize.close();
			},
			canclePopup() {
				let that = this;
				that.closeClockSuccess();
			},
			openPopupactivityEnding(){
				this.$refs.popupactivityEnding.open();
			},
			imageClockUpload() {
				let that = this;
				// 选择图片
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.api_root + 'Upload/image', // 开发者服务器的URL
							filePath: tempFilePaths[0],
							name: 'iFile', // 必填，文件对应的 key
							formData: {
								site_id: app.globalData.site_id,
								site_type: app.globalData.site_type,
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								var result = JSON.parse(uploadFileRes.data);
								if (result.code === 1) {
									console.log('code1');
									that.imageClockId = result.data.file_id;
									that.imageClock = result.data.file_path;
								} else {
									uni.showToast({
										title: result.data.msg,
										icon: 'none'
									});
									return;
								}
							},
							fail: (uploadFileErr) => {
								console.error('upload fail:', uploadFileErr);
							}
						});
					},
					fail: (chooseImageErr) => {
						console.error('choose image fail:', chooseImageErr);
					}
				});
			},
			uploadpic() {
				let that = this;
				// 选择图片
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.api_root + 'Upload/image', // 开发者服务器的URL
							filePath: tempFilePaths[0],
							name: 'iFile', // 必填，文件对应的 key
							formData: {
								site_id: app.globalData.site_id,
								site_type: app.globalData.site_type,
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								var result = JSON.parse(uploadFileRes.data);
								if (result.code === 1) {
									that.image_arr.push({
											file_id: result.data.file_id,
											file_path: result.data.file_path
										}

									);
								} else {
									uni.showToast({
										title: result.data.msg,
										icon: 'none'
									});
									return;
								}
							},
							fail: (uploadFileErr) => {
								console.error('upload fail:', uploadFileErr);
							}
						});
					},
					fail: (chooseImageErr) => {
						console.error('choose image fail:', chooseImageErr);
					}
				});
			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(e) {
				let index = e,
					that = this,
					pic = this.image_arr[index];
				that.image_arr.splice(index, 1);
				that.$set(that, 'image_arr', that.image_arr);
			},
			DelImageClock() {
				let that = this;
				that.imageClock = '';
			},
			uploadEdit() {
				let that = this;
				let image_arrId = [];
				if(that.image_arr.length < 3 || !that.imageClock){
					uni.showToast({
						title:'请上传打卡地图照片和3张社交媒体分享截图',
						icon: 'none'
					});
					return;
				}else{
					uni.showModal({
						title: '提示',
						content: '提交之后不可修改，是否确定提交',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.image_arr.forEach((item,index) => {
									image_arrId.push(item.file_id)
								})
								app.globalData._post_form('user.Reward/edit', {
									"image_arr":image_arrId,
									"image_clock": that.imageClockId,
									"user_reward_id":that.reward_id
								}, function(result) {
									console.log(result)
									that.showRewardDetail();
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}
				
			}

		},

		//发送给朋友
		onShareAppMessage: function() {
			let that = this;
			let uid = uni.getStorageSync('user_id')
			return {
				title: that.settingInfo.share_title,
				path: '/pages/index/index?pid=' + uid,
				imageUrl: that.settingInfo.share_image
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			let uid = uni.getStorageSync('user_id')
			return {
				title: that.settingInfo.share_title,
				path: '/pages/index/index?pid=' + uid,
				imageUrl: that.settingInfo.share_image
			};
		},
	}
</script>

<style scoped lang="less">
	.page {
		width: 100%;
		height: 100vh;
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btns {
		padding: 10rpx;
		position: relative;
		top: 85%;
		z-index: 1;
	}

	.image-button {
		background-color: transparent;
		border: none;
		padding: 0;
		outline: none;
	}

	.image-button::after {
		border: none;
	}

	.popup {
		width: 640rpx;
		height: 857rpx;
		position: relative;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			padding: 60rpx 20rpx 20rpx;
		}

		//规则
		.contentRule {
			padding: 0rpx 40rpx;
			font-size: 30rpx;
			line-height: 45rpx;
			letter-spacing: 3rpx;
			height: 550rpx;
			overflow: hidden;
			overflow-y: scroll;

			.inputBg {
				background-color: #f6f6f6;
				display: flex;
				margin-top: 30rpx;
				height: 90rpx;
				align-items: center;
				font-size: 30rpx;
				border-radius: 15rpx;
			}

			image {
				width: 39rpx;
				height: 39rpx;
				padding: 0rpx 20rpx;
			}

			input {
				width: 100%;
				height: 100%;
			}
		}

		//信息
		.contentUserInfo {
			padding: 0rpx 40rpx;
			font-size: 30rpx;
			line-height: 45rpx;
			letter-spacing: 3rpx;

			.inputBg {
				background-color: #f6f6f6;
				display: flex;
				margin-top: 30rpx;
				height: 90rpx;
				align-items: center;
				font-size: 30rpx;
				border-radius: 15rpx;
			}

			image {
				width: 39rpx;
				height: 39rpx;
				padding: 0rpx 20rpx;
			}

			input {
				width: 100%;
				height: 100%;
			}

		}


		//信息
		.contentInfo {
			padding: 0rpx 40rpx;
			font-size: 30rpx;
			line-height: 45rpx;
			letter-spacing: 3rpx;
			text-align: center;
			padding-top: 75%;

			.name {
				font-size: 42rpx;
				font-weight: bold;
			}

			.successText {
				font-size: 42rpx;
				font-weight: bold;
				padding: 30rpx;
			}

			.cancelText {
				font-size: 36rpx;
				padding: 30rpx;
			}

			.text {
				color: #0164a7;

			}

		}


		//领取奖励
		.receiveInfo {
			padding: 0rpx 40rpx;
			font-size: 30rpx;
			line-height: 45rpx;
			letter-spacing: 3rpx;
			text-align: center;
			padding-top: 40%;
			color: #fff;

			.name {
				font-size: 46rpx;
				font-weight: bold;
			}

			.title {
				font-size: 34rpx;
				padding: 5rpx;
			}
		}

		//获取奖励
		.getInfo {
			padding: 0rpx 40rpx;
			font-size: 30rpx;
			line-height: 45rpx;
			letter-spacing: 3rpx;
			text-align: center;
			padding-top: 30%;

			.name {
				font-size: 46rpx;
				font-weight: bold;
			}

			.title {
				font-size: 34rpx;
				padding: 5rpx;
			}
		}

		.getInfoText {
			text-align: center;
			color: #0164a7;
			// padding-bottom: 20rpx;
			padding: 30rpx 0rpx;
			// width: 70%;
			margin: 0 auto;
		}

		.errorInfoText {
			text-align: center;
			padding-bottom: 20rpx;
			font-size: 28rpx;
		}


		.popupBtns {
			// padding: 20rpx 30rpx;
			background-color: #0171bc;
			color: #fff;
			width: 50%;
			font-size: 32rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			text-align: center;
		}


	}

	.popupGuanbi {
		text-align: center;
		padding-top: 60rpx;

		image {
			width: 68rpx;
			height: 69rpx;
		}
	}

	.official-account {
		position: absolute;
		z-index: 20211209;
		opacity: 0;
		width: 100%;
		height: 100%;
		top: 0rpx;
		left: 0rpx;
	}
</style>